<template>
	<!-- element 组件 -->
	<el-date-picker v-bind="bindProps" v-model="searchParam[column.field]" v-if="elComponentName === 'el-date-picker'"></el-date-picker>
	<component v-else-if="componentName.includes('el-')" :is="componentMapping[elComponentName]" v-bind="bindProps" v-model="searchParam[column.field]">
		<template v-if="elComponentName.includes('select')">
			<component
				:is="componentMapping[`el-option`]"
				v-for="(col, index) in elSelectOptions"
				:key="index"
				:label="col.label"
				:value="col.value"
			></component>
		</template>
	</component>
	<!-- 自定义渲染 -->
	<dx-v-node
		v-else-if="typeof column.search?.component?.render === 'function'"
		:vNode="column.search.component.render"
		:param="searchParam"
	></dx-v-node>
	<!-- 默认 -->
	<el-input v-else v-model="searchParam[column.field]" clearable :placeholder="`请输入${column.label}`"></el-input>
</template>

<script setup lang="ts" name="DxSearchFormItem">
import { computed, markRaw } from 'vue';
const props = defineProps<{
	column: any;
	searchParam: { [key: string]: any };
}>();
// 组件映射
const componentMapping = markRaw<{ [key: string]: any }>({
	'el-input': ElInput,
	'el-select': ElSelect,
	'el-option': ElOption,
});
/**
 * 组件名称
 */
const componentName = computed(() => {
	if (['create_date', 'update_date'].includes(props.column.field)) {
		return 'el-date-picker';
	}
	return props.column.search?.component?.name || '';
});
/**
 * element
 */
const elComponentName = computed(() => {
	if (['el-switch', 'el-radio-group', 'el-checkbox-group'].includes(componentName.value)) {
		return 'el-select';
	}
	return componentName.value;
});
const elSelectOptions = computed(() => {
	if (componentName.value === 'el-switch') {
		return [
			{
				label: '是',
				value: true,
			},
			{
				label: '否',
				value: false,
			},
		];
	}
	return props.column.search?.component?.options;
});
// 属性处理
const bindProps = computed(() => {
	let params: any = {
		clearable: true,
	};
	if (componentName.value.includes('input') && params.placeholder === void 0) {
		params.placeholder = `请输入${props.column.label}`;
	}
	if (elComponentName.value.includes('select') && params.placeholder === void 0) {
		params.placeholder = `请选择${props.column.label}`;
	}
	if (componentName.value == 'el-date-picker') {
		params.type = 'daterange';
		params['range-separator'] = '至';
		params['start-placeholder'] = '开始日期';
		params['end-placeholder'] = '结束日期';
		params['shortcuts'] = [
			{
				text: '最近一周',
				value: () => {
					const end = new Date();
					const start = new Date();
					start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
					return [start, end];
				},
			},
			{
				text: '最近一个月',
				value: () => {
					const end = new Date();
					const start = new Date();
					start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
					return [start, end];
				},
			},
			{
				text: '最近三个月',
				value: () => {
					const end = new Date();
					const start = new Date();
					start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
					return [start, end];
				},
			},
		];
	}
	// 自定义的覆盖
	if (props.column.search?.component?.props !== void 0) {
		Object.assign(params, props.column.search.component.props);
	}
	if (componentName.value.includes('input')) {
		// 搜索只要text 的 input 即可
		Reflect.deleteProperty(params, 'type');
	}

	return params;
});
</script>
